<template>
  <!-- 顶部导航栏 -->
  <div class="flex justify-between items-center w-full ">
    <!-- 左侧折叠按钮 -->
  <div class="flex items-center" >
    <el-button
      class="!p-6px !w-32px !h-32px grid place-center !ml--5"  
      @click="handleMenu"
    >
      <!-- 图标 -->
<el-icon
  :size="16"
  :class="store.isCollapse ? 'text-green-500' : 'text-blue-500'"
>
  <Expand v-if="store.isCollapse" />
  <Fold v-else />
</el-icon>

    </el-button>
  </div>

    <!-- 右侧区域 -->
    <div class="flex items-center gap-2">
      <!-- 语言切换 -->
      <el-switch
        v-model="isZh"
        inline-prompt
        active-text="中文"
        inactive-text="English"
        style="--el-switch-off-color: #13ce66"
        @change="handleLanguageChange"
      />

      <!-- 用户下拉 -->
      <el-dropdown>
        <span class="flex items-center gap-1 cursor-pointer">
          <el-avatar :size="30" src="../assets/vue.svg" />
          <el-icon><ArrowDown /></el-icon>
        </span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item>设置</el-dropdown-item>
            <el-dropdown-item @click="handleLogout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, h } from 'vue'
import { useAllDataStore } from '@/stores'
import { i18n } from '@/locales'
import { ArrowDown ,Fold, Expand } from '@element-plus/icons-vue'

const store = useAllDataStore()

/* ---------- 折叠按钮 ---------- */
const bntMenuText = computed(() => (store.isCollapse ? 'expand' : 'collapse'))
function handleMenu() {
  store.isCollapse = !store.isCollapse
}

/* ---------- 退出登录 ---------- */
function handleLogout() {
  store.logout()
}

/* ---------- 语言切换 ---------- */
const isZh = computed({
  get: () => store.locale === 'zh',
  set: v => {
    const lang = v ? 'zh' : 'en'
    store.setLocale(lang)
    i18n.global.locale.value = lang
  }
})
function handleLanguageChange(v: boolean) {
  isZh.value = v
}

/* ---------- 图标（用行内 SVG 代替伪类） ---------- */
const ZhIcon = () =>
  h('svg', { class: 'w-14px h-14px', viewBox: '0 0 24 24' }, [
    h('path', {
      d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 15H9v-2h2v2zm0-4H9V9h2v4zm4 4h-2v-2h2v2zm0-4h-2V9h2v4z',
      fill: 'currentColor'
    })
  ])

const EnIcon = () =>
  h('svg', { class: 'w-14px h-14px', viewBox: '0 0 24 24' }, [
    h('path', {
      d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15H8v-2h2v2zm0-4H8V9h2v4zm4 4h-2v-2h2v2zm0-4h-2V9h2v4z',
      fill: 'currentColor'
    })
  ])
</script>
